<template>
  <el-container>
    <el-aside width="200px" color="#545c64">
      <el-menu
          :default-active="this.$store.state.active"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-menu-item index="Index">
          <template slot="title">
            <i class="el-icon-s-home"></i>
            <span slot="title">GameStore</span>
          </template>
        </el-menu-item>

        <router-link to="/userManage" @click="this.$store.active=2">
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        </router-link>

        <router-link to="/goodsManage">
        <el-menu-item index="3" @click="this.$store.active=3">
          <i class="el-icon-document"></i>
          <span slot="title">游戏管理</span>
        </el-menu-item>
        </router-link>

          <router-link to="/orderManage" @click="this.$store.active=3">
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
          </router-link>

      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="height: 55px;  ">
        <strong style="font-size: 20px">游戏商城后台管理系统</strong>
        <div class="header-avatar">
          <!--              <el-avatar class="el-avatar"  size="medium" :src="userInfo.avatar"></el-avatar>-->
          <el-dropdown>
          <span class="el-dropdown-link" >
            管理员：{{this.username1}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :underline="false">
                <router-link to="/admin/userCenter">
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item @click.native="logout">
                退出
              </el-dropdown-item>

            </el-dropdown-menu>
<!--            <router-link to="/login" style="margin-left: 8px; color: white">-->
<!--              退出管理系统-->
<!--            </router-link>-->
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <div style="margin: 0 15px">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import qs from 'qs'
export default {
  name: "admin",
  data (){
    return {
      username1:sessionStorage.getItem('username'),
      userInfo: {
        userId:"",
        username:"",

      }
    }
  },
  //默认打开的
  // openMenu:['UserInfoManage','CourseInfoManage','TeachInfoManage'] ,
  created() {
    if(sessionStorage.getItem('userId') === '-1' || sessionStorage.getItem('userId') === null || sessionStorage.getItem('role') === '0'){
      this.$message({
        showClose: true,
        message: '没有权限',
        type: 'error',
      });
      this.$router.push("/login")
    }
  },
  methods: {
    getUserInfo() {
      this.userInfo.userId=this.$store.state.userId;
      this.$axios.get("GameStore/user/"+qs.stringify(this.userInfo.id)).then(res => {
        this.userInfo.username = res.data.username;
        console.log("人员信息：",res.data.username);
      })
    },
    logout() {
      this.$axios.get("/logout").then(res => {
        if(res.data.status === 200){
          this.$message({
            showClose: true,
            message: '退出成功',
            type: 'success',
          });
          sessionStorage.setItem("userId",'-1');
          sessionStorage.setItem("token", '-1')
          this.$router.push("/login")
        }
      })
    }
  }
}
</script>

<style scoped>

/*整个页面*/
.el-container{
  padding: 0;
  margin: 0;
  height: 100%;
}
/*顶栏*/
.header-avatar{
  float: right;
  width: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/*  下拉菜单*/
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
}
/*下拉箭头*/
.el-icon-arrow-down {
  font-size: 12px;
}
/*边栏*/
.el-menu-vertical-demo{
  height: 100%;
}
/*页面整体布局*/
.el-header, .el-footer {
  background-color: #17B3A3;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #545c64;
  color: #545c64;
  text-align: left;
  line-height: 200px;
  height: 100%;
  width: 120px
}

.el-main {
  padding: 0;
  background-color: #ffffff;
  color: #333;
  /*text-align: center;*/
  /*line-height: 40px;*/
}

a{
  text-decoration: none;
  color: grey;
}

a:hover{
  color: #66B1FF;
}
</style>